<template>
	<div id="app">
		<div class="header">
			<input type="text" class="oinp" placeholder="输入关键字"/>
		</div>
		<div class="nav">
			<p>女装</p>
			<p>男装</p>
			<p>童装</p>
			<p>婴幼儿</p>
			<p>运动</p>
		</div>
		<div class="section">
			<div class="desc">
				<div class="zuo">
					<ul>
						<li v-for="(data,index) in datalist">
							{{data.name}}
						</li>
					</ul>
				</div>
				<div class="you">
					<div class="img">
						<img src="../../static/img/8.jpg">
					</div>
					<div class="yi">
						<dl>
							<dt><img src="../../static/img/7.jpg"></dt>
							<dd>印花短T恤</dd>
						</dl>
						<dl>
							<dt><img src="../../static/img/7.jpg"></dt>
							<dd>印花短T恤</dd>
						</dl>
						<dl>
							<dt><img src="../../static/img/7.jpg"></dt>
							<dd>印花短T恤</dd>
						</dl>
					</div>
						<div class="yi">
						<dl>
							<dt><img src="../../static/img/7.jpg"></dt>
							<dd>印花短T恤</dd>
						</dl>
						<dl>
							<dt><img src="../../static/img/7.jpg"></dt>
							<dd>印花短T恤</dd>
						</dl>
						<dl>
							<dt><img src="../../static/img/7.jpg"></dt>
							<dd>印花短T恤</dd>
						</dl>
					</div>
						<div class="yi">
						<dl>
							<dt><img src="../../static/img/7.jpg"></dt>
							<dd>印花短T恤</dd>
						</dl>
						<dl>
							<dt><img src="../../static/img/7.jpg"></dt>
							<dd>印花短T恤</dd>
						</dl>
						<dl>
							<dt><img src="../../static/img/7.jpg"></dt>
							<dd>印花短T恤</dd>
						</dl>
					</div>
				</div>
			</div>
		</div>
		<div class="footer">
			<ofooter></ofooter>
		</div>
	</div>
</template>

<script>
	import ofooter from '@/components/footer'
	export default {
		data(){
			return{
				datalist:[
				{
					name:"女装上新"
				},{
					name:"上装类"
				},{
					name:"衬衫类"
				},{
					name:"针织衫"
				},{
					name:"外套类"
				},{
					name:"裤&裙装"
				},{
					name:"家居&内着"
				},{
					name:"配件"
				}]
			}
		},
		components:{
			ofooter
		}
	}
</script>

<style scoped="scoped">
html,body,#app{
				width: 100%;
				height: 100%;
			}
			*{
				margin: 0;
				padding: 0;
				list-style: none;
			}
			#app{
				display: flex;
				flex-direction: column;
			}
			.header{
				width: 100%;
				height: 1rem;
				background: white;
				position: fixed;
				top: 0;
				left: 0;
			}
			.nav{
				width: 100%;
				height: 1.1rem;
				background: white;
				margin-top: 1rem;
				display: flex;
				flex-direction: row;
				border-bottom: 2px solid #CECECE;
			}
			.nav p{
				flex: 1;
				line-height: 1.3rem;
			}
			.oinp{
				width: 85%;
				height:.7rem;
				margin-left: .5rem;
				margin-top: .16rem;
				background: url(../../static/img/2.jpg) #f2f2f2 no-repeat .5rem;
				background-size: .5rem;
				text-indent: 1.3rem;
				outline: none;
				border: none;
				font-size: 16px;
				border-radius:6px;
			}
			.section{
				width: 100%;
				height: 100%;
				flex: 1;
				background: white;
				margin:  2.1rem 0 1rem 0;
			}
			.desc{
				width: 100%;
				height: 8rem;
				display: flex;
				flex-direction: row;
			}
			.zuo{
				width: 30%;
				border-right: 1px solid #F2F2F2;
			}
			.zuo ul{
				margin-top: .15rem;
			}
			.zuo ul li{
				font-size: 14px;
				color: #676767;
				height: .9rem;
				line-height: .9rem;
				text-align: center;
			}
			.zuo ul li:hover{
			    font-size: 16px;
				color: black;
			}
			.zuo ul li:nth-child(1){
				border-bottom: 1px solid #F2F2F2;
			}
			.img{
				height: 2rem;
				padding-left: .12rem;
				padding-top: .2rem;
			}
			.img img{
				width: 97%;
				height: 1.8rem;
			}
			.you{
				flex: 1;
				width: 70%;
			}
			.yi{
				font-size: 12px;
				display: flex;
				flex-direction: row;
				/*width: 60%;*/
				height: 1.8rem;
			}
			.yi dl{
				flex: 1;
				text-align: center;
			}
			.yi dl dt{
				margin-top: .2rem;
			}
			.yi dl dd{
				margin-top: .15rem;
			}
			.yi dl dt img{
				width: .7rem;
				height: 1rem;
			}
</style>